<template>
    <div class="upfile_main">

        <!--<el-upload-->
                <!--action="#"-->
                <!--ref="file"-->
                <!--list-type="picture-card"-->
                <!--:auto-upload="false"-->
                <!--:file-list="imageUrls"-->
                <!--:on-preview="handlePictureCardPreview"-->
                <!--:on-change="addExplain"-->
                <!--:on-exceed="handleExceed"-->
                <!--:on-remove="remove"-->
                <!--:limit=1-->

                <!--drap-->
        <!--&gt;-->
        <!--</el-upload>-->
        <el-upload
                class="upload-demo"
                action="#"
                :on-preview="handlePictureCardPreview"
                multiple
                :limit="10"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="addExplain"
                :on-exceed="handleExceed"
               >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div>
            <el-tag
                    class="el_tag"
                    v-for="tag,index in list"
                    :key="tag.index"
                    closable
                    @close="del(index)"
                    type="success">
                {{tag|mtrim}}
            </el-tag>
        </div>
    </div>
</template>
<script>
    export default{
        props:{
            limit:{
                default:1
            },
            callback:{
                type:Function,
                default:function(){
                }
            },//上传成功的时候的回调方法
            file_config:{
                type:Object,
                default:function () {
                    return {}
                }
            },//返回的url写入ruleForm的哪个字段
            list:{
                type:Array,
                default:{
                    function(){
                        return []
                    }
                }
            },//用于tag展示的默认数据
            delUrl:{
                type:Function,
                default:function(){
                }
            }//回调方法,返回点击的那个tag的index,用于删除
        },
        data(){
            return {
                imageUrls:[],
                arr:[],
                dialogImageUrl:"",
                dialogVisible:false,
                dialogVisibles:false,
                imgAddr:"",
            }
        },
        methods:{
            handlePictureCardPreview(file){
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            addExplain(file,files){

                const fileSize = file.size / 1024 / 1024;
                if(fileSize > 10){
                    this.$message({
                        message: "上传文件大小不能超过10M",
                        type: "warning",
                    })
                    this.$refs['file'].clearFiles();
                    return;
                }
                let formData=new FormData();
                formData.append("files",file.raw)
                var config = {
                    header: {
                        "Content-Type": "multipart/form-data",
                    },
                };
                this.$http({
                    url:"trademark/files/fupload",
                    method: "post",
                    headers: {
                        "Content-Type": "multipart/form-data",
                    },
                    data:formData
                }).then((res)=>{
                    this.callback(res.data.data.filePath,this.file_config)
                })
            },
            remove(files){

            },
            funss(){

            },
            handleExceed(files, fileList) {
            },
            del(index){
                this.delUrl(index,this.file_config)
            }
        },
        filters:{
            mtrim(value){
                let arr=value.split("/")
                arr=arr[arr.length-1].split("-")
                return arr[arr.length-1]
            }
        }
    }
</script>

<style lang="less" scoped>
    /* 上传一张图片后不再上传 */
    ul.el-upload-list.el-upload-list--picture-card+div{
        display: none;
    }
    ul.el-upload-list.el-upload-list--picture-card:empty+div{
        display: inline-block;
    }
    .upfile-img-box{
        margin-right: 10px;
        width: 160px;
        height: 150px;
        cursor: pointer;
    }
    .upfile-img-box img{
        width: 110px;
        height: 100%;
    }
    img{
        /*width: 110px;*/
        /*height: 100%;*/
    }
    .upfile_main{
        display:flex
    }
    .upfile-img-show{
        display: flex;
        justify-content: center;
        align-items: center;

    }

</style>
<style >

    .upfile_main img{
        width:100%;
    }
    .el_tag{
        margin: 0 10px 5px 10px;
    }
</style>